import React, { useEffect, useState, useRef } from 'react';
import { Tree, Card, Dropdown, Button } from 'antd';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import FromSet from './components/SetForm';
import DepartmentAdmin from './components/DepartmentAdmin'
import './index.less';
const management = (props) => {
  const { dispatch, departmentNewList = [], loading } = props;
  const [visible, setVisible] = useState(false);
  const [departVisible, setDepartVisible] = useState(false)
  const childRef = useRef();

  useEffect(() => {
    fetchData();
  }, []);
  const fetchData = () => {
    dispatch({
      type: 'system/fetchListDepartment',
    });
  };
  const filterList = (list) => {
    return list.map((item) => {
      const { subDepartmentList: children } = item;
      const localItem = {
        ...item,
        children: children ? filterList(children) : undefined,
      };
      return localItem;
    });
  };
  // const filterList = (list) => {
  //   return list.map((item) => {
  //     const { departmentName: title, id: key, subDepartmentList: children } = item;
  //     const localItem = {
  //       title: (
  //         <Dropdown
  //           overlayStyle={{ width: 120 }}
  //           menu={{
  //             items: [
  //               {
  //                 key: 'edit',
  //                 label: (
  //                   <Button
  //                     onClick={() => setVisible({ show: true, detail: { ...item } })}
  //                     type="default"
  //                   >
  //                     编辑
  //                   </Button>
  //                 ),
  //               },
  //               {
  //                 key: 'del',
  //                 label: (
  //                   <Button
  //                     onClick={() => {
  //                       dispatch({
  //                         type: 'system/fakeDeleteDepartment',
  //                         payload: {
  //                           id: item.id,
  //                         },
  //                         callback: () => {
  //                           fetchData();
  //                         },
  //                       });
  //                     }}
  //                     type="default"
  //                   >
  //                     删除
  //                   </Button>
  //                 ),
  //               },
  //             ],
  //           }}
  //           placement="bottomLeft"
  //         >
  //           <div>{title}</div>
  //         </Dropdown>
  //       ),
  //       key,
  //       children: children ? filterList(children) : undefined,
  //     };
  //     return localItem;
  //   });
  // };
  const getColumns = [
    {
      title: '部门名称',
      dataIndex: 'departmentName',
    },
    {
      title: '部门负责人',
      dataIndex: 'leaderName',
    },
    {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          auth: true,
          title: '编辑',
          click: () => setVisible({ show: true, detail: { ...record } }),
        },
        {
          auth: true,
          title: '查看成员',
          click: () => setDepartVisible({
            show: true,
            detail: {
              departmentId: val
            }
          }),
        },

        {
          auth: true,
          title: '删除',
          type: 'del',
          click: () => {
            dispatch({
              type: 'system/fakeDeleteDepartment',
              payload: {
                id: val,
              },
              callback: () => {
                fetchData();
              },
            });
          },
        },
      ],
    },
  ];
  return (
    <Card
      title="部门管理"
      extra={
        <Button
          onClick={() => {
            setVisible({ show: true });
          }}
          type="link"
        >
          新增
        </Button>
      }
    >
      <TableDataBlock
        pagination={false}
        cRef={childRef}
        loading={loading}
        columns={getColumns}
        rowKey={(record) => `${record.id}`}
        list={filterList(departmentNewList)}
      ></TableDataBlock>
      {/* <div className="management_box_left">
        <Tree treeData={filterList(departmentNewList)} />
      </div> */}
      <FromSet
        reload={() => fetchData()}
        visible={visible}
        onClose={() => setVisible(false)}
      ></FromSet>
      <DepartmentAdmin visible={departVisible}
        onClose={() => setDepartVisible(false)}></DepartmentAdmin>
    </Card>
  );
};

export default connect(({ system, loading }) => ({
  ...system,
  loading: loading.models.system,
}))(management);
